<template>
	<a-list item-layout="vertical" :data-source="props.dataSource" :pagination="pagination" :loading="loading">
		<template #renderItem="{ item, index }">
			<a-list-item :key="index" class="sys-data-list-item">
				<a-list-item-meta class="sys-data-list-item-meta">
					<template #avatar>
						<a-avatar shape="square" :size="50">{{ index + 1 }}</a-avatar>
					</template>
					<template #title>
						<div class="sys-data-list-item-meta-title">
							<div class="sys-data-list-item-meta-title-prefix">
								<slot name="title-prefix" :record="item.record"></slot>
							</div>
							<a @click="clickTitle(item)">{{ item.title }}</a>
							<div class="sys-data-list-item-meta-title-suffix">
								<slot name="title-suffix" :record="item.record"></slot>
							</div>
						</div>
					</template>
					<template #description>
						<a-tooltip placement="top" v-for="description in item.descriptions">
							<template #title>
								<span>{{ description.title }}</span>
							</template>
							<a-tag>{{ description.content }}</a-tag>
						</a-tooltip>
					</template>
				</a-list-item-meta>
				<div class="sys-content" v-if="item.contents">
					<div class="sys-statistics" v-for="content in item.contents">
						<div class="sys-statistic-title">
							{{ content.title }}
						</div>
						<div class="sys-statistic-content">
							<span>{{ content.content }}</span>
						</div>
					</div>
				</div>
				<template #extra v-if="item.extra">
					<div class="sys-extra">
						<div class="sys-statistics">
							<div class="sys-statistic-title">{{ item.extra.title }}</div>
							<div class="sys-statistic-content">
								<span>{{ item.extra.content }}</span>
							</div>
						</div>
					</div>
				</template>
				<template #actions>
					<a-button type="link" @click="doAction(key, item)"
							  v-for="{ key, label, icon, color } in props.actions">
						<template #icon>
							<component :is="icon" :style="{ color: color }"/>
						</template>
						{{ label }}
					</a-button>
				</template>
			</a-list-item>
		</template>
	</a-list>
</template>

<script setup name="sysDataList">
import {message} from 'ant-design-vue'

const props = defineProps({
	// 数据源
	dataSource: {
		type: Array,
		required: true
	},
	// 分页
	page: {
		type: Object,
		required: true
	},
	// 动作
	actions: {
		type: Array,
		default: () => []
	},
	loading: {
		type: Boolean,
		default: false
	}
})
const emit = defineEmits(['title', 'action', 'page-change'])

// 分页参数
const {current, size, total} = toRefs(props.page)
const pagination = reactive({
	onChange: (current) => {
		emit('page-change', current)
	},
	current: current,
	pageSize: size,
	total: total
})

// 出发 点击标题
const clickTitle = (item) => {
	if (!item.record) {
		message.error('记录参数[record]错误')
		return
	}
	emit('title', {record: item.record})
}
// 触发 action
const doAction = (key, item) => {
	if (!item.record) {
		message.error('记录参数[record]错误')
		return
	}
	emit('action', {key, record: item.record})
}
</script>

<style lang="less" scoped>
.sys-data-list-item {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	padding: 12px 15px;
	margin-bottom: 10px;

	.sys-data-list-item-meta {
		align-items: center;
		padding-bottom: 15px;
		border-bottom: 1px solid #f0f0f0;

		.sys-data-list-item-meta-title {
			display: flex;
			align-items: center;

			.sys-data-list-item-meta-title-prefix {
				padding-left: 5px;
			}

			a {
				color: var(--text-color);
				transition: all 0.3s;
				padding: 0 5px;
			}

			.sys-data-list-item-meta-title-suffix {
				display: flex;
				flex: 1;
				justify-content: flex-end;
			}
		}
	}

	.sys-content {
		//box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
	}

	.sys-extra {
		display: flex;
		align-items: center;
		height: 100%;
	}
}

.sys-statistics {
	display: inline-block;
	box-sizing: border-box;
	margin: 5px 20px;
	padding: 10px;
	color: var(--text-color);
	font-size: 14px;
	font-variant: tabular-nums;
	line-height: 1.5715;
	list-style: none;
	font-feature-settings: 'tnum';

	&:hover {
		box-shadow: var(--card-shadow);
	}

	.sys-statistic-title {
		margin-bottom: 4px;
		color: var(--text-color-secondary);
		font-size: 14px;
	}

	.sys-statistic-content {
		color: var(--heading-color);
		font-size: 15px;
	}
}
</style>
